<script lang="ts" setup>
import { ref, reactive } from 'vue'
// 获取用户的id
import { useUserInfoStore } from '@/store/user.js'
const userInfoStore = useUserInfoStore();

import { userUpdatePswService, userChargeService } from "@/api/user";
import { ElMessage } from 'element-plus'

const infoModel = ref({
    id: userInfoStore.info.id,
    originPassword: '',
    newPassword: '',
})

const UpdatePassword = async () => {
    let result = await userUpdatePswService(infoModel.value)
    // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '修改成功')

    } else {
        ElMessage.error('修改失败')
    }
}

//////////////////////  账户充值

const MoneyModel = ref({
    id: userInfoStore.info.id,
    money: '',
})

const options = [
    {
        value: '20',
        label: '20元',
    },
    {
        value: '50',
        label: '50元',
    },
    {
        value: '100',
        label: '100元',
    },
    {
        value: '200',
        label: '200元',
    },
]

const userCharge =async () => {
    // console.log('用户充值：')
    // console.log(MoneyModel.value)
    let result =await userChargeService(MoneyModel.value)
   
    // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '充值成功')

    } else {
        ElMessage.error('充值失败')
    }
}
</script>

<template>
    <el-card class="">
        <div class="card-header">
            <span>修改密码</span>
        </div>
        <div style="margin-top: 20px;">
            <hr>
        </div>

        <el-from :inline="true" :model="infoModel" label-width="100px" style="padding-right: 30px" class="demo-form-inline">
            <el-form-item label="原密码:" prop="originPassword">
                <el-input v-model="infoModel.originPassword" style="width: 240px" placeholder="请输入原密码" clearable
                    show-password />
            </el-form-item>

            <el-form-item label="新密码:" prop="newPassword">
                <el-input v-model="infoModel.newPassword" style="width: 240px" placeholder="请输入密码" clearable
                    show-password />

            </el-form-item>
        </el-from>


        <el-button type="primary" @click="UpdatePassword"> 修改 </el-button>

        <div style="margin-top: 20px;">
            <hr>
        </div>
        <div class="card-header">
            <span>账户充值</span>
        </div>

        <div class="money">
            <h4>选择充值数目：</h4>
            <el-select class="" v-model="MoneyModel.money" clearable placeholder="请选择金额" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <el-button type="primary" @click="userCharge" style="margin-top: 20px;"> 充值 </el-button>
    </el-card>
</template>

<style scoped>
.el-select {
    width: 220px;
}

.money {
    margin-top: 1%;
}

/* .money .el-select{
    margin-left: 20%;
} */
</style>